var data = [
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009811',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009812',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009813',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009814',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009815',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009816',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009817',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009818',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009819',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009820',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009821',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009822',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009823',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009824',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009825',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009826',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009827',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009828',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009829',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009830',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009831',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009832',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009833',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009834',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009835',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009836',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009837',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009838',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009839',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009840',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009841',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009842',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009843',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009844',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009845',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009846',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009847',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009848',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009849',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009850',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009851',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009852',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009853',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009854',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009855',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009856',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009857',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009858',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009859',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
  {
    first: '<input type="checkbox" class="btnSon"/>',
    id: '40009860',
    name: '王子轩',
    role: '党办',
    state: '有效',
  },
]
//当前页吗
var page = 1
//每页条数
var count = 10
var oTBody = document.querySelector('.tbodyB')
var oPagination = document.querySelector('.pagination')
var btnFather = document.querySelector('.btnFather')
//获取上一页的按钮
var oPrevBtn = document.querySelector('.prev')
//获取下一页的按钮
var oNextBtn = document.querySelector('.next')
var oAddSaveBtn = document.querySelector('.addSaveBtn')
//获取修改保存
var oEditSaveBtn = document.querySelector('.editSaveBtn')

//页面初始化渲染功能
function render() {
  oTBody.innerHTML = ''
  var renderArr = data.slice((page - 1) * count, page * count)
  for (var i = 0; i < renderArr.length; i++) {
    var oTr = document.createElement('tr')
    oTr.innerHTML = `
  <td class="tR-1 ">${renderArr[i].first}</td>
  <td>${renderArr[i].id}</td>
  <td>${renderArr[i].name}</td>
  <td>${renderArr[i].role}</td>
  <td>${renderArr[i].state}</td>
  <td>
    <button class="btn alter edit" >修改</button>
    <button class="btn del">删除</button>
  </td>`
    oTBody.appendChild(oTr)
  }

  //渲染页码
  var aPageBtn = document.querySelectorAll('.pageBtn')
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode)
  }
  for (var i = 1; i <= Math.ceil(data.length / count); i++) {
    var oLi = document.createElement('li')
    oLi.innerHTML = `<a class="pageBtn"  href="#">${i}</a>`
    if (i == page) {
      oLi.classList.add('active')
    }
    oPagination.insertBefore(oLi, oPagination.lastElementChild)
  }

  //联动全选
  var btnSon = document.querySelectorAll('.btnSon')
  var num = 0
  btnFather.onclick = function () {
    if (btnFather.checked == true) {
      for (var i = 0; i < btnSon.length; i++) {
        btnSon[i].checked = true
      }
      num = btnSon.length
    } else {
      for (var i = 0; i < btnSon.length; i++) {
        btnSon[i].checked = false
      }
      num = 0
    }
  }
  for (var i = 0; i < btnSon.length; i++) {
    btnSon[i].onclick = function () {
      if (this.checked == true) {
        num++
      } else {
        num--
      }
      if (num == btnSon.length) {
        btnFather.checked = true
      } else {
        btnFather.checked = false
      }
    }
  }
}
render()

//给分页加事件
oPagination.addEventListener('click', changePage)
function changePage() {
  if (event.target.className == 'pageBtn') {
    // var aPageBtn = document.querySelectorAll('.pageBtn')
    // for (var i = 0; i < aPageBtn.length; i++) {
    //   aPageBtn[i].parentNode.classList.remove('active')
    // }
    // event.target.parentNode.classList.add('active')
    page = event.target.innerText
    render()
  }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener('click', prev)
oNextBtn.addEventListener('click', next)
function prev() {
  page = 1
  render()
}
function next() {
  if (page < Math.ceil(data.length / count)) {
    page++
    render()
  }
}
//删除功能
oTBody.addEventListener('click', del)
function del() {
  if (event.target.className.includes('del')) {
    var id = event.target.parentNode.parentNode.children[1].innerText
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        data.splice(i, 1)
      }
    }
    render()
  }
}
//添加事件
oAddSaveBtn.addEventListener('click', addFn)
function addFn() {
  var addId = document.querySelector('.roleId').value
  var addName = document.querySelector('.roleName').value
  var addRole = document.querySelector('.roleRole').value
  var addSex = document.querySelector('#inlineRadio1').checked ? '有效' : '无效'

  data.push({
    first: '<input type="checkbox" class="btnSon"/>',
    id: addId,
    name: addName,
    role: addRole,
    state: addSex,
  })
  render()
  //模态框隐藏
  $('#addModal').modal('hide')
}
//给所有编辑按钮加事件
oTBody.addEventListener('click', openEdit)
function openEdit() {
  //判断事件源
  if (event.target.className.includes('edit')) {
    //编辑框显示
    $('#editModal').modal('show')
    //先确认是那个ID的数据
    var id = event.target.parentNode.parentNode.children[1].innerText
    //循环数据找到对应id，给编辑框赋值
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        document.querySelector('.editId').value = data[i].id

        document.querySelector('.editName').value = data[i].name

        document.querySelector('.editRole').value = data[i].role

        if (data[i].state == '无效') {
          document.querySelector('#editRadio2').checked = true
        }
      }
    }
  }
}

//点击修改保存
oEditSaveBtn.addEventListener('click', editSave)
function editSave() {
  //看替换的是哪一条
  var id = document.querySelector('.editId').value
  //循环数据，找到对应的项更改
  for (var i = 0; i < data.length; i++) {
    if (data[i].id == id) {
      data[i].name = document.querySelector('.editName').value
      data[i].role = document.querySelector('.editRole').value
      data[i].state = document.querySelector('#editRadio1').checked
        ? '有效'
        : '无效'
    }
  }
  //关闭弹框
  $('#editModal').modal('hide')
  //重新渲染
  render()
}
